<template>
  <div class="shopcar">
    <div class="mui-card card1" v-for="(item,i) in carList" :key="item.id">
      <div class="mui-card-content">
        <!-- {{$store.getters.innitSwitch}}是对象{‘88’：true，‘89’：true，} 
        mt-switch有一个change事件，返回值是checked:boolen
        当触发change事件时，应该更新store中和内存中数据状态selected值
        v-model绑定的值其实是改变的，要想在事件函数里获取其最新值，把它作为参数传递过去-->
        <mt-switch
          v-model="$store.getters.innitSwitch[item.id]"
          @change="changeSelected(item.id , $store.getters.innitSwitch[item.id])"
        ></mt-switch>
        <img :src="item.thumb_path" alt>
        <div class="info">
          <h4>{{item.title}}</h4>
          <div class="price-con">
            <span class="price">￥{{item.sell_price}}</span>
            <!-- 子组件：当两个子组件业务逻辑不同时，不能抽离成同一个子组件 -->
            <!-- 自定义属性：:data-id='item.id' -->
            <div class="mui-numbox" data-numbox-min="1">
              <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
              <!-- {{$store.getters.innitCount}}是有id和count值组成的对象{‘88’：11，‘89’：5，‘90’：8}
              readonly设置文本框只读，不可输入值，只能点击+-微调-->
              <!-- 当发生改变时，重新修改store中和localStorage中的值 -->
              <!-- bug:如何获取当前点击的商品的id呢？change事件的事件函数传递参数item.id,方法中形参接收 -->
              <!-- bug:使用ref获取input元素，因为v-for循环的原因，所有input框都是同一个ref名字，所以一次会获取到所有的input
              ☆解决方法：使用e.target获取当前实际触发change事件的元素，vue中事件对象是$event，作为实参随着事件传递
              方法二：①给input动态绑定：ref="item,id"  ②将item.id作为事件参数传递过去  ③在时间函数里接收形参id打印this.$refs[id]-->
              <input
                class="mui-numbox-input"
                type="number"
                :value="$store.getters.innitCount[item.id]"
                readonly
                @change="updateStore($event,item.id)"
              >
              <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
            </div>
            <!-- 点击删除按钮，修改store和内存中的数据,还要删除页面中的这个商品，所以v-for时把index传进来 -->
            <span class="del" @click.prevent="del(item.id,i)">删除</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 结算区域 -->
    <div class="mui-card card2">
      <div class="mui-card-content">
        <div class="all">
          <p>总计：（不含运费）</p>
          <p>
            已勾选商品
            <strong>{{$store.getters.getAllCount}}</strong>件，
            总价
            <strong>{{$store.getters.getAllprice }}</strong>
          </p>
        </div>
        <mt-button type="danger" size="small">去结算</mt-button>
      </div>
    </div>
  </div>
</template>
<script>
// 使用js效果，需要引入js文件
import mui from "../../../node_modules/mui/js/mui.min.js";
export default {
  data() {
    return {
      a: true,
      carList: []
    };
  },
  created() {
    this.getCardata();
  },
  mounted() {},
  // bug:mui数字输入框无法点击加减，在updated中初始化，因为购物车的数据是使用ajax请求渲染的
  updated() {
    mui(".mui-numbox").numbox();
  },
  methods: {
    // 获取购物车数据
    getCardata() {
      // url地址要求传递，购物车所有商品的id 且以，分割 Url:/api/goods/getshopcarlist/87,88,89
      // 首先获取store中的购物车数组，循环获取id，拼接为这种形式的字符串
      let arr = [];
      this.$store.state.shopCar.forEach(item => {
        if (item) {
          arr.push(item.id);
        } else {
          return;
        }
      });
      if (arr.length != 0) {
        this.$http
          .get(`api/goods/getshopcarlist/${arr.join(",")}`)
          .then(res => {
            console.log(res.body.message);
            this.carList = res.body.message;
          });
      }
    },
    // 点击加减购物车页面的数字框，更新store和本地存储的数据数量
    updateStore(e, id) {
      // console.log(e.target.value);
      // console.log(id);
      // 传过去一个对象，包含id和修改后的count值
      let updateCount = {
        // bug:如何获取当前点击的商品的id呢？change事件的事件函数传递参数item.id,方法中形参接收
        // bug:使用ref获取input元素，因为v-for循环的原因，所有input框都是同一个ref名字，所以一次会获取到所有的input
        // ☆解决方法：使用e.target获取当前实际触发change事件的元素，vue中事件对象是$event，作为实参随着事件传递
        id: id,
        count: parseInt(e.target.value)
      };
      this.$store.commit("updateShopcar", updateCount);
    },
    // mt-switch有一个change事件，返回值是checked:boolen
    // 当触发change事件时，应该更新store中和内存中数据状态selected值
    // v-model绑定的值其实是改变的，要想在事件函数里获取其最新值，把它作为参数传递过去selected为形参
    changeSelected(id, selected) {
      console.log(id + "......." + selected);
      // 改变store中的值，调用store中的方法,传递过去对象id和选中状态
      let upselected = {
        id: id,
        selected: selected
      };
      console.log(upselected);

      this.$store.commit("updateSelected", upselected);
    },
    // 点击删除按钮，修改store和内存的值
    del(id, i) {
      // 删除store和内存中商品
      this.$store.commit("delCar", id);
      // 删除页面中商品，即删除data中carList数组中当前删除项
      this.carList.splice(i, 1);
    }
  }
};
</script>
<style lang="less" scoped>
.shopcar {
  .card1 {
    .mui-card-content {
      display: flex;
      padding: 10px;
      align-items: center;
      img {
        width: 50px;
        height: 50px;
        margin: 0 5px;
      }
      .info {
        h4 {
          font-size: 13px;
          margin-bottom: 7px;
        }
        .price-con {
          .price {
            font-style: 15px;
            color: red;
            font-weight: 700;
          }
          .mui-numbox {
            height: 30px;
            margin: 0 8px;
          }
          .del {
            color: blue;
            font-style: 16px;
          }
        }
      }
    }
  }
  .card2 {
    padding: 15px;
    .mui-card-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      strong {
        color: red;
        font-size: 18px;
      }
    }
  }
}
</style>